<template>
  <a-form style="max-width: 500px; margin: 40px auto 0;">
    <a-form-item
      label="付款账户"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      v-bind="validateInfos.paymentUser"
    >
      <a-select
        placeholder="pearadmin@com"
        v-model:value="paymentUser"
        allowClear
      >
        <a-select-option value="1">pearadmin.com</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      label="收款账户"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      v-bind="validateInfos.payType"
    >
      <a-input-group
        style="display: inline-block; vertical-align: middle"
        :compact="true"
      >
        <a-select defaultValue="alipay" style="width: 100px">
          <a-select-option value="alipay">支付宝</a-select-option>
          <a-select-option value="wexinpay">微信</a-select-option>
        </a-select>
        <a-input
          v-model:value="payType"
          :style="{width: 'calc(100% - 100px)'}"
        />
      </a-input-group>
    </a-form-item>
    <a-form-item
      label="收款人姓名"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      v-bind="validateInfos.name"
    >
      <a-input v-model:value="name"/>
    </a-form-item>
    <a-form-item
      label="转账金额"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      v-bind="validateInfos.money"
    >
      <a-input v-model:value="money" prefix="￥"/>
    </a-form-item>
    <a-form-item :wrapperCol="{span: 19, offset: 5}">
      <a-button type="primary" @click="nextStep">下一步</a-button>
    </a-form-item>
  </a-form>
  <a-divider/>
  <div class="step-form-style-desc">
    <h3>说明</h3>
    <h4>转账到支付宝账户</h4>
    <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
  </div>
</template>

<script>
/**
 * 注意: step 内容是使用的动态组件component。动态组件上有绑定子组件需要回调的emit，
 * 而动态组件是在调用的组件之上有包裹一层的，所以，回调的方法如 next 之类的是绑定在根元素上的。
 * 这样的话emit出去是无法指向正确的父级组件的
 * 所以需要切换绑定的属性是为 子组件本身之上。故设置
 * inheritAttrs = false 可以将绑定的事件切回到组件本身
 *
 * 如果不习惯这种写法，或用法。可在stepForm.vue中，用v-if代替换<component> 可实现同等效果
 *
 */
import {defineComponent, markRaw, reactive, toRefs} from "vue";
import {useForm} from "@ant-design-vue/use";

export default defineComponent({
  name: 'step1',
  inheritAttrs: false,
  emits: ['next'],
  setup(props, {emit}) {
    const labelCol = markRaw({lg: {span: 5}, sm: {span: 5}})
    const wrapperCol = markRaw({lg: {span: 19}, sm: {span: 19}})
    const formState = reactive({
      paymentUser: '',
      payType: 'test@example.com',
      name: 'Alex',
      money: '5000'
    })
    const {validate, validateInfos} = useForm(formState, reactive({
      paymentUser: [{required: true, message: '付款账户必须填写'}],
      payType: [{required: true, message: '收款账户必须填写'}],
      name: [{required: true, message: '收款人名称必须核对'}],
      money: [{required: true, message: '转账金额必须填写'}]
    }))
    const nextStep = async e => {
      try {
        const values = await validate()
        emit('next', values)
      } catch (e) {
        console.log(e)
      }
    }
    return {
      ...toRefs(formState),
      labelCol,
      wrapperCol,
      validateInfos,
      nextStep
    }
  }
})
</script>

<style scoped lang="less">
.step-form-style-desc {
  padding: 0 56px;
  color: rgba(0, 0, 0, .45);

  h3 {
    margin: 0 0 12px;
    color: rgba(0, 0, 0, .45);
    font-size: 16px;
    line-height: 32px;
  }

  h4 {
    margin: 0 0 4px;
    color: rgba(0, 0, 0, .45);
    font-size: 14px;
    line-height: 22px;
  }

  p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 22px;
  }
}
</style>
